<template>
	<div class="login-box">
		<el-form
			ref="loginForm"
			class="login-form animate__animated animate__backInLeft"
			:model="loginForm"
			:rules="loginFormRules"
			status-icon
			@submit.native.prevent
		>
			<el-form-item prop="userName" label="账号">
				<el-input v-model.trim="loginForm.userName" placeholder="请输入账号" type="text" show-word-limit clearable @keyup.enter.native="loginSub" />
			</el-form-item>
			<el-form-item prop="password" label="密码">
				<el-input v-model.lazy="loginForm.password" placeholder="请输入密码" type="password" show-password clearable @keyup.enter.native="loginSub" />
			</el-form-item>
			<el-button type="primary" class="login-btn" @click="loginSub">登录</el-button>
		</el-form>
		<!-- <vue-threejs-birds
      style="max-width: none;zIndex:-1"
      :color1="birds.color1"
      :color2="birds.color2"
      :quantity="birds.quantity"
      :canvasBgAlpha="birds.canvasBgAlpha"
      :wingsSpan="birds.wingsSpan"
      :colorEffect="birds.colorEffect"
    /> -->
		<vue-particles
			class="login-bg"
			color="#39AFFD"
			shape-type="circle"
			hover-mode="grab"
			click-mode="push"
			lines-color="#8DD1FE"
			:particle-opacity="0.7"
			:particles-number="80"
			:particle-size="4"
			:lines-width="1"
			:line-linked="true"
			:line-opacity="0.4"
			:lines-distance="150"
			:move-speed="3"
			:hover-effect="true"
			:click-effect="true"
		/>
	</div>
</template>

<script>
// https://github.com/Yiuman/citrus-vuetify/blob/master/src/view/login/index.vue
// import VueThreejsBirds from "vue-threejs-birds";
import { setToken } from "@/utils/auth";
export default {
	components: {
		// VueThreejsBirds
	},
	data() {
		return {
			loginForm: {},
			loginFormRules: {
				userName: [{ required: true, message: "请输入账号", trigger: "blur" }],
				password: [{ required: true, message: "请输入密码", trigger: "blur" }],
			},
			birds: {
				// color1: "red",
				// color2: "teal",
				quantity: 4,
				canvasBgAlpha: 0,
				// wingsSpan: 20,
				// colorEffect: 2,
				// canvasBgColor: "#FFFFFF",
				// wingSpan: 20
			},
		};
	},
	mounted() {
		Object.assign(this.$data, {
			loginForm: {
				userName: "admin",
				password: "123456",
			},
		});
	},
	methods: {
		loginSub() {
			this.$refs.loginForm.validate(async valid => {
				if (valid) {
					setToken("123");
					// await this.$store.dispatch("user/A_setMenuList");
					this.$router.push({ path: "/" }).catch(() => {});
				}
			});
		},
	},
};
</script>

<style lang="scss" scoped>
.login-bg {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: -1;
}
.login-box {
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	background: rgba($color: #000, $alpha: 1);
	display: flex;
	justify-content: center;
	align-items: center;
	.login-form {
		width: 400px;
		height: 400px;
		background: transparent;
		padding: 50px 40px;
		position: relative;
		box-shadow: 0px 0px 15px teal;
		.login-btn {
			position: absolute;
			right: 40px;
			bottom: 20px;
		}
	}
}
</style>
